<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { getExchange, getExchangeNum, getShopName, getVerification } from '@/api/pointManagement/pointMangement';

interface tableDataType {
    exchangeCreatedBy: 0;
    exchangeCreatedTime: '';
    exchangeDatetime: '';
    exchangeId: '';
    exchangeIsDelete: 0;
    exchangeIsVerification: 0;
    exchangeKey: '';
    exchangeShopId: 0;
    exchangeShopImage: '0';
    exchangeShopIntegral: 80;
    exchangeShopName: '';
    exchangeShopValue: 0;
    exchangeUpdatedBy: null;
    exchangeUpdatedTime: null;
    exchangeUser: 0;
    exchangeUserName: '';
    exchangeUserPhone: '';
    exchangeVerificationDatetime: null;
}

const tableData = ref<tableDataType[]>([]);
const dialogFormVisible = ref(false);
const nameValidateForm = reactive({
    goodsName: '',
    goodsIntroduce: '',
    // 兑换积分
    goodsIntegral: '',
    // 可兑换次数
    goodsExchangeFrequency: '',
    // 剩余数量
    goodsMargin: '',
    goodsSort: '',
    goodsState: '',
    goodsValue: '',
    goodsNumber: 0,
    goodsId: 0
});
const imageUrlPc = ref('');
const imageUrl = ref('');

function handleClick(edit) {
    console.log(edit);
    nameValidateForm.goodsName = edit.row.goodsName;
    nameValidateForm.goodsIntroduce = edit.row.goodsIntroduce;
    nameValidateForm.goodsExchangeFrequency = edit.row.goodsExchangeFrequency;
    nameValidateForm.goodsMargin = edit.row.goodsMargin;
    nameValidateForm.goodsSort = edit.row.goodsSort;
    nameValidateForm.goodsState = edit.row.goodsState;
    nameValidateForm.goodsValue = edit.row.goodsValue;
    nameValidateForm.goodsNumber = edit.row.goodsNumber;
    nameValidateForm.goodsIntegral = edit.row.goodsIntegral;
    imageUrlPc.value = edit.row.goodsImage;
    nameValidateForm.goodsId = edit.row.goodsId;

}

//渲染
let totalNum = ref({
    count:0
});
getExchange().then(res => {
    console.log(res);
    totalNum.value.count = (res as any).total;
    (res as any).rows.map((item: any) => {
        tableData.value.push(item);
    });
});

//是否展示
function show(tableDataDisplay) {
    console.log(tableDataDisplay);

}

import { ElMessage, ElMessageBox } from 'element-plus';
import { Search } from '@element-plus/icons-vue';

let data = ref({
    exchangeId: 0,
    exchangeKey: '',
    exchangeIsVerification: 0
});
let state = ref();

//禁用按钮
function judgment(tableDataDisplay){
//     tableDataDisplay.row.exchangeIsVerification

}

const open = (tableDataDisplay) => {
    ElMessageBox.prompt('兑换码', '', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputPattern: /\S+/,
        // inputPattern: / /,
        // /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '请输入兑换码'
        // message: tableDataDisplay.row.exchangeIsVerification
    })
        .then(({ value }) => {
            if (value === tableDataDisplay.row.exchangeKey) {
                console.log(tableDataDisplay.row.exchangeKey);
                console.log(value);
                data.value.exchangeId = tableDataDisplay.row.exchangeId;
                data.value.exchangeKey = tableDataDisplay.row.exchangeKey;
                getVerification(data.value).then(res => {
                    console.log(res);
                });
                ElMessage({
                    type: 'success',
                    message: '成功兑换'
                });
            } else {
                ElMessage({
                    type: 'warning',
                    message: '兑换码错误'
                });
                tableDataDisplay.row.exchangeIsVerification =0;
                console.log(data.value.exchangeId);
                console.log(tableDataDisplay.row.exchangeKey);
                console.log('1');
            }
        })
        .catch(() => {
            tableDataDisplay.row.exchangeIsVerification =0;
            ElMessage({
                type: 'info',
                message: '取消输入'
            });
        });
};
//搜索
const input = ref('');
const input1 = ref('');
const value = ref('');
const options = [
    {
        value: '1',
        label: '已核销'
    },
    {
        value: '0',
        label: '未核销'
    }
];
let searchData = ref({
    exchangeShopName: '',
    exchangeIsVerification: 0,
    exchangeKey: ''
});

function search() {
    console.log(input.value);
    console.log(value.value);
    searchData.value.exchangeShopName = input.value;
    searchData.value.exchangeIsVerification = Number(value.value);
    searchData.value.exchangeKey = input1.value;
    tableData.value.length = 0;
    getShopName(searchData.value).then(res => {
        console.log(res);
        (res as any).rows.map((item: any) => {
            tableData.value.push(item);

        });

    });

}

//重置
function reset() {
    tableData.value.length = 0;
    getExchange().then(res => {
        console.log(res);
        (res as any).rows.map((item: any) => {
            tableData.value.push(item);

        });
    });
}


//分页器
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const currentPage1 = ref(1);

function changeNum() {
    tableData.value.length = 0;
    getExchangeNum(currentPage1.value).then(res => {
        console.log(res);
        (res as any).rows.map((item: any) => {
            tableData.value.push(item);

        });
    });
    console.log(currentPage1.value);
}
</script>

<template>
    <div>
        <div style='float: left; margin: 20px'>商品名称
            <el-input v-model='input' style='width: 240px;height: 40px' placeholder='请输入名称' />
        </div>
        <div style='float: left;margin: 20px'>状态
            <el-select
                v-model='value'
                placeholder='请输入商品状态'
                size='large'
                style='width: 240px'
            >
                <el-option
                    v-for='item in options'
                    :key='item.value'
                    :label='item.label'
                    :value='item.value'
                />
            </el-select>
        </div>
        <div style='float: left; margin: 20px'>兑换码
            <el-input v-model='input1' style='width: 240px;height: 40px' placeholder='请输入兑换码' />
        </div>
        <div style='float: left;margin: 20px'>
            <el-button @click='search()' type='primary' :icon='Search'>搜索</el-button>
        </div>
        <div @click='reset' style='float: left;margin:  20px '>
            <el-button type='primary'>重置</el-button>
        </div>
        <!--        表单-->
        <el-table :data='tableData' style='width: 90%;margin: auto;text-align: center'>
            <el-table-column fixed prop='exchangeShopName' label='商品名称' width='' />
            <el-table-column fixed prop='exchangeUserName' label='兑换人' width='' />
            <el-table-column fixed prop='exchangeUserPhone' label='兑换电话' width='' />
            <el-table-column fixed prop='exchangeDatetime' label='兑换时间' width='' />
            <el-table-column prop='exchangeIsVerification' label='状态' width='285'>
                <template #default='tableDataDisplay'>
                    <el-switch
                        v-model='tableDataDisplay.row.exchangeIsVerification'
                        size='large'
                        prop='exchangeIsVerification'
                        @click='open(tableDataDisplay)'
                        :disabled='tableDataDisplay.row.exchangeIsVerification'

                        :active-value=1
                        :inactive-value=0
                    />
                    <div v-if='tableDataDisplay.row.exchangeIsVerification'>
                        已兑换
                    </div>
                    <div v-else>
                        未兑换
                    </div>
                </template>
            </el-table-column>

        </el-table>
<!--        分页-->
        <div class='demo-pagination-block' style='float: right; margin-right: 100px'>
            <el-pagination
                v-model:current-page='currentPage1'
                :page-size='10'
                :small='small'
                :disabled='disabled'
                :background='background'
                layout='total, prev, pager, next'
                :total='totalNum.count'
                @click='changeNum'

            />
        </div>
    </div>
</template>

<style scoped>
img{
    display: inline-block;
}

/deep/ .cell {
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
